<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf8">

	<link rel="stylesheet" href="css/leaflet.css" />
	<link rel="stylesheet" href="css/nv.d3.css" />
	<link rel="stylesheet" href="annotate/Leaf-draw.css" />
	<link rel="stylesheet" href="lib/leaflet.awesome-markers.css">
	<link rel="stylesheet" href="css/font-awesome.css" >
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/main.css" />

  </head>
  <body>

	<div class="chartArea">
    	<div id="lineChart">
			<svg width="475" height="330" style="width:475px;height:330px"></svg>
    	</div>
    	<div id="pieChart">
    		<svg width="475" height="330" style="width:475px;height:330px"></svg>
    	</div>
  	</div>

	<nav id="header" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container pull-left">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" id="project-brand" href="#">同仁堂健康全国销售状态一览</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
            </div>
        </div>
    </nav>

  <div class="hideMe">
  	Zip Code: <input id="zip" type="text">&nbsp;
  	<button onclick="zoomZip()">Search</button>&nbsp;
	<select id="variable" onchange="updateColor()">
	  <option value="density">Density</option>
	  <option value="age">Age</option>
	  <option value="weather">Weather</option>
	</select>
	<br/>
	</div>
  	<div id="divMap"></div>

	<div id="svgBarDiv" class="legend legend-health" style="left: 346px; display: block;">
            <table style="margin-left: 5px">
                <tbody>
                    <tr>
                        <td class="legend-title" colspan="10">销售量</td>
                    </tr>
                    <tr>
                        <td class="legend-red" style="background:rgb(0,103,161)"></td>
						<td class="legend-red" style="background:rgb(45,152,203)"></td>
						 <td class="legend-red" style="background:rgb(150,202,39)"></td>
						 <td class="legend-red" style="background:rgb(246,151,48)"></td>
                        <td class="legend-red" style="background:rgb(255, 60, 0)"></td>
                       <td></td>
                    </tr>

                </tbody>
            </table>
            <table style="width: 495px">
            	<tbody><tr>
                        <td class="legend-text-right">0</td>
                        <td class="legend-text-right">100</td>
                        <td class="legend-text-right">200</td>
                        <td class="legend-text-right"><div style="width: 10px;margin-left: 20px;">300</div></td>
                        <td class="legend-text-right"><div style="margin-left: 20px;width: 10px;">400</div></td>
                        <td class="legend-text-right"><div style="text-align: center;">500</div></td>

                    </tr>
               </tbody></table>
        </div>



	  	<div id="topChartArea" style="display:none">
	  		<h4>全国同仁堂销售top10</h4>
	  		<ul>
			<li>1. <label>428,9344</label><span><a href="#">上海，延安西路店</a></span></li>
			<li>2. <label>400,9021</label><span><a href="#">北京，崇文门店</a></span></li>
			<li>3. <label>396,6602</label><span><a href="#">北京，大栅栏店</a></span></li>
			<li>4. <label>392,8960</label><span><a href="#">上海，弘基店</a></span></li>
			<li>5. <label>352,9002</label><span><a href="#">香港，波斯富店</a></span></li>
			<li>6. <label>308,4427</label><span><a href="#">南京，乐家老铺路店</a></span></li>
			<li>7. <label>284,6220</label><span><a href="#">上海，四川中路店</a></span></li>
			<li>8. <label>202,0934</label><span><a href="#">北京，苏州街店</a></span></li>
			<li>9. <label>174,616</label><span><a href="#">成都，总府路店</a></span></li>
			<li>10.<label>166,2312</label><span><a href="#">厦门，禾祥西路店</a></span></li>
	  		</ul>
	  	</div>


  	<script src="data/zipdata_test.js"></script>
  	<script src="lib/underscore.js"></script>
  	<script src="lib/jquery/jquery.min.js"></script>
	<script src="lib/d3.v3.js"></script>
	<script src="lib/nv.d3.js"></script>
  	<script src="lib/leaflet/leaflet-src.js"></script>
	<script src="lib/leaflet.awesome-markers.js"></script>
	<script src="lib/topojson.v1.min.js"></script>
	<script src="annotate/Leaf-draw.js"></script>
	<script src="maps/zh-mainland-provinces.topo.js"></script>
	<script src="js/main.js"></script>
  </body>
</html>
